<template>
	<view class="roomEndContent">
		<view class="titleBox">
			<u-notice-bar mode="horizontal" :text='titleWarning' close-icon='true'></u-notice-bar>
		</view>
		<view class="headBox">
			<view :class="payNum >= 0 ? 'titleV':'titleD'">
				统计结束
			</view>
			<view :class="payNum >= 0 ? 'titleV':'titleD'">
				总计:{{payNum}}
				<text class="cha">茶水({{payCha}})</text>
			</view>
		</view>
		<view class="userListBox">
			<u-row
				justify=""
				v-for="(i,index) in userList"
				customStyle="height:100rpx;margin:10rpx 0 10rpx 0;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
				<u-col span="2">
					<view class="userInfo">
						<image class="logo" :src="i.url"></image>
					</view>
				</u-col>
				<u-col span="2">
					<view class="userInfo">
						{{i.username}}
					</view>
				</u-col>
				<u-col span="8">
					<view :class="i.num >= 0 ? 'Vtext':'Dtext'">
						<view class="">
							￥{{i.num}}
						</view>
						<view class="Chatext">
							（茶水{{i.num}})
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="btnBox">
			<view class="btn">
				<u-button type="primary" @click="">结算生成</u-button>
			</view>
			<view class="btn">
				<u-button type="primary">历史记录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				titleWarning:'简易记账仅提供记录，禁止赌博或其它非法行为',
				userList:[
					{
						id:1,
						url:'/static/logo.png',
						username:'周XXX1',
						num:50
					},
					{
						id:2,
						url:'/static/logo.png',
						username:'周',
						num:0
					},
					{
						id:3,
						url:'/static/logo.png',
						username:'周',
						num:-50
					},
					{
						id:4,
						url:'/static/logo.png',
						username:'周',
						num:50
					},
					{
						id:5,
						url:'/static/logo.png',
						username:'周',
						num:50
					},
					{
						id:6,
						url:'/static/logo.png',
						username:'周',
						num:50
					},
					{
						id:7,
						url:'/static/logo.png',
						username:'周',
						num:50
					},
				],
				payNum:-1,
				payCha:25
			}
		},
		onReady() {
		},
		onShow() {
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.roomEndContent{
		.headBox{
			text-align: center;
			.titleV{
				font-size: 56rpx;
				font-weight: bold;
				color: #fa3534;
				.cha{
					font-size: 28rpx;
					font-weight: 600;
					color: black;
				}
			}
			.titleD{
				font-size: 56rpx;
				font-weight: bold;
				color: #19be6b;
				.cha{
					font-size: 28rpx;
					font-weight: 600;
					color: black;
				}
			}
		}
		.userListBox{
			width: 95%;
			margin: auto;
			height: 690rpx;
			overflow-y: scroll;
			.userInfo{
				display: flex;
				align-items: center;
				.logo{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}
			}
			.Vtext{
				color: #fa3534;
				text-align: right;
			}
			.Dtext{
				color: #19be6b;
				text-align: right;
			}
			.Chatext{
				color: #82848a;
				font-size: 24rpx;
			}
		}
		.btnBox{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 300rpx;
			background-color: $u-info-light;
			.btn{
				width: 80%;
				margin: 20rpx auto;
			}
		}
	}
</style>